import React, { FC, useContext, useState } from 'react';
import { View, Text, Radio, Image } from '@tarojs/components';
import { styled } from 'linaria/react';
import { useClassName } from '@/utils/index';
import { LoginContext } from '../../LoginContext';
import Taro from '@tarojs/taro';
export interface IProps extends ICompProps {}
UserPrivacyAgreement.defaultProps = {} as Partial<IProps>;
function UserPrivacyAgreement(props: IProps) {
    const { className, style } = props;
    const localClassName = useClassName('UserPrivacyAgreement', className);
    const { isAgreeAgreement, setIsAgreeAgreement } = useContext(LoginContext);
    const clickCheckBox = () => {
        const isAgrees = !isAgreeAgreement;
        setIsAgreeAgreement(isAgrees);
    };
    const lookDetail = (type: 'privacy' | 'agreement') => {
        if (type === 'privacy')
            return Taro.navigateTo({
                url: 'pages/UserPrivacy/UserPrivacy',
            });
        if (type === 'agreement')
            return Taro.navigateTo({
                url: 'pages/UserAgreement/UserAgreement',
            });
    };
    return (
        <RootView className={localClassName} style={style}>
            <View className="UserPrivacyAgreement_wrap">
                <View
                    className="checkBox"
                    onClick={clickCheckBox}
                    style={{ backgroundColor: isAgreeAgreement ? '#ff8828' : '#fff' }}>
                    <Image className="img" src={require('@/assets/images/selection-gou.png')} mode="scaleToFill" />
                </View>
                <Text className="startAgreement"> 我已阅读并同意</Text>
                <Text className="agreement_content" onClick={() => lookDetail('privacy')}>
                    《用户协议》
                </Text>
                <Text className="connectAgreement">和</Text>
                <Text className="agreement_content" onClick={() => lookDetail('agreement')}>
                    《隐私政策》
                </Text>
            </View>
        </RootView>
    );
}
export default React.memo(UserPrivacyAgreement as FC<IProps>);
const cssBorder = ` 1px solid #cbcdd6`;
const RootView = styled(View)`
    &.UserPrivacyAgreement {
        margin-top: 20px;
        .UserPrivacyAgreement_wrap {
            display: flex;
            font-size: 24px;
            align-items: center;
            .checkBox {
                width: 24px;
                height: 24px;
                line-height: 24px;
                text-align: center;
                color: #fff;
                border: ${cssBorder};
                border-radius: 4px;
            }
            .startAgreement {
                margin-right: 6px;
            }
            .agreement_content {
                color: #ff8828;
            }
            .connectAgreement {
                margin: 0 6px;
            }
        }
    }
`;
